<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title)">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title}"></title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="../static/css/typo.css" th:href="@{/css/typo.css}">
    <link rel="stylesheet" href="../static/css/animate.css" th:href="@{/css/animate.css}">
    <link rel="stylesheet" href="../static/lib/prism/prism.css" th:href="@{/lib/prism/prism.css}">
    <link rel="stylesheet" href="../static/lib/tocbot/tocbot.css" th:href="@{/lib/tocbot/tocbot.css}">
    <link rel="stylesheet" href="../static/css/me.css" th:href="@{/css/me.css}">

<!--    // Live2D Widget ：看板娘-->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<!--    <script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>-->
    <!--通过浏览器F12的网络来查看加载位置正不正确-->
    <script src="../static/lib/live2d-widget/autoload.js" th:src="@{/lib/live2d-widget/autoload.js}"></script>
    <!-- 随机语句 -->
    <script src="https://v1.hitokoto.cn/?encode=js&select=%23hitokoto" defer></script>
</head>
<body>
    <!--导航-->
    <nav th:fragment="menu(n)" class="ui inverted attached segment m-padded-tb-mini m-shadow-small" >
        <div class="ui container">
            <div class="ui inverted secondary stackable menu">
                <h2  class="ui  header item"><a class="ui " href="#" th:href="@{/}">WHO | WHERE | WHAT am I ?</a></h2>
                <a href="#" th:href="@{/home}" class="m-item item m-mobile-hide" th:classappend="${n==1}?' active'"><i class="orange home icon"></i><p style="color:#FE9A76">首页</p></a>
                <a href="#" th:href="@{/types/-1}" class="m-item item m-mobile-hide " th:classappend="${n==2}?' active'"><i class="yellow idea icon"></i><p style="color:#FFD700">分类</p></a>
                <a href="#" th:href="@{/tags/-1}" class="m-item item m-mobile-hide" th:classappend="${n==3}?' active'"><i class="olive tags icon"></i><p style="color:#32CD32">标签</p></a>
                <a href="#" th:href="@{/archives}" class="m-item item m-mobile-hide" th:classappend="${n==4}?' active'"><i class="pink clone icon"></i><p style="color:#FF1493">归档</p></a>
                <a href="#" th:href="@{/about}" class="m-item item m-mobile-hide" th:classappend="${n==5}?' active'"><i class="red info icon"></i><p style="color:#B03060">关于我</p></a>
                <div class="right m-item item m-mobile-hide">
                    <form id="search" th:action="@{/search}" target="_blank" method="post">
                        <div class="ui icon inverted transparent input m-margin-tb-tiny">
                            <input type="text" name="query" placeholder="Search...." th:value="${query}">
                            <i onclick="document.forms['search'].submit()" class="search link icon"></i>
                        </div>
                    </form>

                </div>
            </div>
        </div>
        <a href="#" class="ui menu toggle black icon button m-right-top m-mobile-show">
            <i class="sidebar icon"></i>
        </a>
    </nav>


    <!--底部footer-->
    <footer th:fragment="footer" class="ui inverted vertical segment m-padded-tb-large-top" style="margin-top: 15px" >
        <div class="ui center aligned container">
            <div class="ui inverted divided stackable grid">
                <div class="three wide column">
                    <div class="ui inverted link list">
                        <div class="item">
                            <img src="../static/images/wechat.jpg" th:src="@{/images/wechat.jpg}" class="ui rounded image" alt="" style="width: 110px">
                        </div>
                    </div>
                </div>
                <div class="three wide column" style="color: #B03060">
                    <h4 class="inverted header m-text-thin m-text-spaced" style="margin-top: 8px">小地方已经营</h4>
                    <p id="htmer_time" class="item m-text-thin">
                </div>
                <div class="four wide column">
                    <h4 class="ui inverted header m-text-thin m-text-spaced " style="color: #FE9A76">联系我</h4>
                    <div class="ui inverted link list">
                        <a href="#" class="item m-text-thin" style="font-size: 15px">Email：sixchannelspayne@163.com</a>
<!--                        <br/>-->
                        <a href="#" class="item m-text-thin" style="font-size: 15px">QQ：2667980598</a>
                    </div>
                </div>
                <div class="six wide column">
                    <p class="m-text-thin m-text-spaced m-opacity-mini" style="color: #FFD700">
                        <!--/*-->
                        <span style="font-size: 18px;color: #FFD700">格言：</span>
                        <!--*/-->
                        业精于勤，荒于嬉；行成于思，毁于随。</p>
                    <h4 class="ui inverted header m-text-thin m-text-spaced ">动漫句子迷:</h4>
                    <!-- 请注意，以下的示例包含超链接，您可能需要手动配置样式使其不变色。如果您嫌麻烦，可以移除。 -->
                    <p id="hitokoto"></p>
<!--                    <h4 class="ui inverted header m-text-thin m-text-spaced ">题外话:</h4>-->
<!--                    <h4 class="ui inverted header m-text-thin m-text-spaced " style="margin-top: 14px;" >题外话:</h4>-->

                </div>
            </div>
            <div class="ui divider"></div>
            <p class="m-text-thin m-text-spaced m-opacity-tiny">Copyright © 2021 - 2022 Lirenmi Designed by 十万伏特_</p>
        </div>

    </footer>

    <div th:fragment="script">
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js" ></script>
        <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
        <script src="//cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>

        <!-- 网易云音乐接口：以下-->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
            <!-- data-id：歌单id -->
        <div class="aplayer" data-id="475934383" data-server="netease" data-type="playlist" data-fixed="true" data-autoplay="false"  data-volume="0.6" ></div>
        <script src="http://cdn.jsdelivr.net/npm/aplayer@1.10.1/dist/APlayer.min.js"></script>
        <script src="http://cdn.jsdelivr.net/npm/meting@1.2.0/dist/Meting.min.js"></script>
        <!-- 网易云音乐接口：以上-->

        <script src="../static/lib/prism/prism.js" th:src="@{/lib/prism/prism.js}"></script>
        <script src="../static/lib/tocbot/tocbot.min.js" th:src="@{/lib/tocbot/tocbot.min.js}"></script>
        <script src="../static/lib/qrcode/qrcode.min.js" th:src="@{/lib/qrcode/qrcode.min.js}"></script>
        <script src="../static/lib/waypoints/jquery.waypoints.min.js" th:src="@{/lib/waypoints/jquery.waypoints.min.js}"></script>

        <script>
            // 运行时间统计
            function secondToDate(second) {
                if (!second) {
                    return 0;
                }
                var time = new Array(0, 0, 0, 0, 0);
                if (second >= 365 * 24 * 3600) {
                    time[0] = parseInt(second / (365 * 24 * 3600));
                    second %= 365 * 24 * 3600;
                }
                if (second >= 24 * 3600) {
                    time[1] = parseInt(second / (24 * 3600));
                    second %= 24 * 3600;
                }
                if (second >= 3600) {
                    time[2] = parseInt(second / 3600);
                    second %= 3600;
                }
                if (second >= 60) {
                    time[3] = parseInt(second / 60);
                    second %= 60;
                }
                if (second > 0) {
                    time[4] = second;
                }
                return time;
            }
            function setTime() {
                /*此处为网站的创建时间*/
                // 设置的时间超出获取时间后，会显示：0年0天0时0分0秒
                var create_time = Math.round(new Date(Date.UTC(2020, 12, 12, 12, 12, 12)).getTime() / 1000);
                var timestamp = Math.round((new Date().getTime() + 8 * 60 * 60 * 1000) / 1000);
                currentTime = secondToDate((timestamp - create_time));
                currentTimeHtml = currentTime[0] + '年' + currentTime[1] + '天'
                    + currentTime[2] + '时' + currentTime[3] + '分' + currentTime[4]
                    + '秒';
                document.getElementById("htmer_time").innerHTML = currentTimeHtml;
            }
            setInterval(setTime, 1000);

            /* 鼠标点击特效 */
            (function(){
                var a_idx = 0;
                window.onclick = function(event){
                    var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");

                    var heart = document.createElement("b");	//创建b元素
                    heart.onselectstart = new Function('event.returnValue=false');	//防止拖动

                    document.body.appendChild(heart).innerHTML = a[a_idx];		//将b元素添加到页面上
                    a_idx = (a_idx + 1) % a.length;
                    heart.style.cssText = "position: fixed;left:-100%;";	//给p元素设置样式

                    var f = 16, 	// 字体大小
                        x = event.clientX - f / 2, // 横坐标
                        y = event.clientY - f, // 纵坐标
                        c = randomColor(),  // 随机颜色
                        a = 1, 				// 透明度
                        s = 1; 			// 放大缩小

                    var timer = setInterval(function(){		//添加定时器
                        if(a <= 0){
                            document.body.removeChild(heart);
                            clearInterval(timer);
                        }else{
                            heart.style.cssText = "font-size:16px;cursor: default;position: fixed;color:" + c + ";left:" + x + "px;top:" + y + "px;opacity:" + a + ";transform:scale(" + s + ");";

                            y--;
                            a -= 0.016;
                            s += 0.002;
                        }
                    },15)
                }
                // 随机颜色
                function randomColor() {

                    return "rgb(" + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + "," + (~~(Math.random() * 255)) + ")";

                }
            }());

            /*页面 Title 变化*/
            document.addEventListener('visibilitychange',function(){
                if(document.visibilityState=='hidden'){
                    normal_title=document.title;document.title='(●￣(ｴ)￣●)大佬再看看吧...';
                }else{
                    document.title=normal_title;
                }
            });
        </script>
    </div>
</body>
</html>